import { io } from 'socket.io-client'
import {ElMessageBox } from 'element-plus'
import {h} from 'vue'
const socket = io('', {
  path: '/api-server/socket.io',
})
export const socketId = ref()
export const userStatusList = ref<any[]>([])//当前用户链表
export const messages = ref<any[]>([])
socket.on('connect', () => {
  socketId.value = socket.id
})
socket.on('message', (message) => {
  messages.value.push(message)
})
export const sendMessage = (message: string) => {
  socket.emit('message', message)
}

socket.on('userListChange', (res) => {
  userStatusList.value = res.onlineUserIds
})
export const upLine = (userId: string) => {
  socket.emit('upLine', userId)
}
export const talkMap = ref(new Map)

socket.on('callme', (data) => {
//   ElMessageBox({
//     title: `来自${data.username}问候`,
//     // Should pass a function if VNode contains dynamic props
//     message: () =>
//       h('div', null, [
//         h('img', { src: data.headImg, style: {
//           width: '50px',
//           height: '50px',
//           borderRadius: '50%'
//         } }),
//         h('div', {
//           style: {
//             marginTop: '10px',
//             fontSize: '20px',
//             fontWeight: 'bold'
//           }
//         }, [data.message])
//       ]),
//   })
 if (data.type === 1) { // 即时消息
      ElMessageBox({
      title: `来自${data.username}问候`,
      // Should pass a function if VNode contains dynamic props
      message: () =>
        h('div', null, [
          h('img', { src: data.headImg, style: {
            width: '50px',
            height: '50px',
            borderRadius: '50%'
          } }),
          h('div', {
            style: {
              marginTop: '10px',
              fontSize: '20px',
              fontWeight: 'bold'
            }
          }, [data.message])
        ]),
    })
  }
  if (data.type === 2) {
    if (talkMap.value.get(data.sendUserId)) {
      talkMap.value.get(data.sendUserId).push(data.message)
    } else {
      talkMap.value.set(data.sendUserId, [data.message])
    }
  }
})